<template>
  <!-- 列设置 -->
  <el-drawer title="列设置" v-model="drawerVisible" size="450px">
    <el-table :data="settingColumns" :border="true" row-key="prop">
      <el-table-column prop="label" align="center" label="列名" />
      <el-table-column prop="hidden" align="center" label="隐藏" v-slot="scope">
        <el-switch v-model="scope.row.hidden"></el-switch>
      </el-table-column>
      <el-table-column prop="sortable" align="center" label="排序" v-slot="scope">
        <el-switch v-model="scope.row.sortable"></el-switch>
      </el-table-column>
      <template #empty>
        <div class="table-empty">
          <div>暂无可配置列</div>
        </div>
      </template>
    </el-table>
  </el-drawer>
</template>

<script lang="ts">
export default {
  name: "ColumnSetting",
};
</script>
<script setup lang="ts">
import { COLUMN_OPERATE_PROP } from "../utils";
import { rowDrop } from '../utils/drag';

const props = defineProps<{
  modelValue: any[],
}>()

const emit = defineEmits(["update:modelValue"]);
const tableColumns = useVModel(props, "modelValue", emit);

const settingColumns = ref<any[]>([])

const initSettingColumns = () => {
  settingColumns.value = tableColumns.value.filter(item => !["selection", "index", "expand"].includes(item.type!) && item.prop !== COLUMN_OPERATE_PROP)
}

const drawerVisible = ref<boolean>(false);
// 打开列设置
const openColSetting = () => {
  initSettingColumns()
  
  drawerVisible.value = true;

  nextTick(() => {
    rowDrop('.el-drawer__body .el-table__body-wrapper tbody', (e: any) => {
      let { newIndex, oldIndex } = e;
      const ignoreColTotal = tableColumns.value.filter(item =>  ["selection", "index", "expand"].includes(item.type!)).length
      
      oldIndex = ignoreColTotal + oldIndex
      newIndex = ignoreColTotal + newIndex
      const currRow = tableColumns.value.splice(oldIndex, 1)[0];
      tableColumns.value.splice(newIndex, 0, currRow);
    })
  })
};

defineExpose({
  openColSetting
});
</script>

<style scoped>
</style>
